<template>
	<div>
		<mainTop></mainTop>
		<div class="sphfMiddleBox">
			<div class="tqhyPageHead">
				<ul @mouseleave="tqhyHeadHoverIndex = selectedTqhyHeadHover">
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==0||selectedTqhyHeadHover==0}" 
							@click="changeWeb(0)"
							@mouseover="tqhyHeadHoverIndex = 0">会议首页</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==1||selectedTqhyHeadHover==1}" 
							@click="changeWeb(1)"
							@mouseover="tqhyHeadHoverIndex = 1">同期会议</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==2||selectedTqhyHeadHover==2}" 
							@click="changeWeb(2)"
							@mouseover="tqhyHeadHoverIndex = 2">会议嘉宾</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==3||selectedTqhyHeadHover==3}" 
							@click="changeWeb(3)"
							@mouseover="tqhyHeadHoverIndex = 3">视频回放</li>
				</ul>
			</div>
			<div class="sphfContent" >
				<div class="sphfModule" @mouseleave="sphfHoverIndex = selectedsphfHover"
					v-for="(item,index) in endMeeting.rows"
					:key="index" :class="{'sphfHover':sphfHoverIndex==index||selectedsphfHover==index}" 
					@click="selectedsphfHover=index"
					@mouseover="sphfHoverIndex = index"
					>
					<div style="width: 160px;height: 160px;float: left;">
						<img :src="'https://zha.heavenk.com/prod-api'+item.image" style="width: 100%;height: 100%;" alt=""></div>
					<div style="height: 148px; float: left;color: #150e52;width: 340px;margin-left: 10px;margin-top: 12px;position: relative;">
						<div style="font-size: 18px;font-weight: 600; height: 50px;overflow: hidden;width: 100%; 
						font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">{{ item.name }}</div>
						<div style="font-size: 17px;
						font-family: Adobe 黑体 Std R;margin-top: 9px;">
						特邀讲师：{{item.guestName}}（{{item.unit}}）
						</div>
						<div style="position: absolute;bottom:0px;">
							<a @click="getQrCode(item.qrCode)" style="text-decoration: none;color: #150e52;cursor: pointer;">
							<div style="cursor: pointer;width: 80px;
							height: 30px;line-height: 30px; border: 2px solid #150e52;font-size: 19px;text-align: center;
							padding:0px 9px;font-weight: 600;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">
								回放
							</div>
							</a>
						</div>	
					</div>
				</div>
				
			</div>
			<div style="width: 1140px;min-width: 1140px;margin: auto;height: 40px;margin-top: 20px;" v-if="total">
				<div style="height: 40px;float: right;">
					 <el-pagination
					      @size-change="handleSizeChange"
					      @current-change="handleCurrentChange"
					      :current-page.sync="currentPage"
					      :page-size="8"
					      layout="prev, pager, next"
					      :total="this.total">
					    </el-pagination>
						<div class="el-pagination__jump">
							共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
								<input type="text" class="inputNum" v-model="pageInputNum"
								oninput="value=value.replace(/[^\d]/g,'');
								if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
								value= value.substr(1,1)}" >
						</div>
						页
						</div>
						
					<button class="button1" style=""  @click="changePage">确定</button>
				</div>
			</div>
		</div>
		<el-dialog
		  
		  :visible.sync="centerDialogVisible"
		  width="810px"
		
		  center>
		  <div class="dialogLeft" style="">
			  <!-- <img src="../images/dialogBg.png" style="width: 100%;height: 100%;" alt=""> -->
			  <div style="text-align: center;margin-top: 130px;">
				  <img src="../images/12.png" style="width: 60px;" alt="">
			  </div>
			  <div style="margin-left: 10px;margin-top: 60px;">
				  <img src="../images/diaText.png" alt="">
			  </div>
			  
			  </div>
			<div style="text-align: center;margin-top: 105px;">
				<img :src="this.QrCode" style="width: 190px;height: 190px;" alt="">
				<div style="font-size: 28px;color: #201b1b;margin-top: 20px;letter-spacing: 2px;">
					扫码 <div style="font-weight: 600;margin-top: -1px;margin: 0px 5px; display: inline-block;">—</div> 进入直播间
				</div>
			</div>
		 
		</el-dialog>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
				tqhyHeadHoverIndex:3,
				selectedTqhyHeadHover:3,
				pageSize: 16,
				totalCount: 1,
				totalPageSize:1,
				pageInputNum:'',
				currentPage: 1,
				total: 0 ,
				endMeeting:'',
				sphfHoverIndex:-1,
				selectedsphfHover:-1,
				centerDialogVisible: false,
			   	QrCode:'',

			   };
			},
		created(){
			this.getEndMeeting(1);
		},
		methods:{
			getQrCode(qrcode){
				this.centerDialogVisible=true
				this.QrCode='https://zha.heavenk.com/prod-api'+ qrcode
				
			},
			getEndMeeting(pnum){
				axios.get('https://zha.heavenk.com/prod-api/web/meeting/endMeeting',{
					params:{
						pageSize:8,
						pageNum:pnum,
					}
				}).then((res)=>{
                    this.endMeeting=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/8)
					// console.log(this.endMeeting);
					
                })
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange() {
			   this.contentPerPage.pn=this.currentPage;
			   contentList(this.contentPerPage).then(response => {
			           this.contentPerPageList = response.data;
			         });
			},
			changeFirstPage(){
				this.currentPage=1;
				this.handleCurrentChange();
			},
			changeLastPage(){
				this.currentPage=this.totalPageSize;
				this.handleCurrentChange();
			},
			getTotalPageSize(){
				this.totalPageSize=this.totalCount/this.pageSize
			},
			changePage(){
				this.currentPage=this.pageInputNum;
				this.handleCurrentChange();
			},
			changeWeb(num){
				this.selectedTqhyHeadHover=3
				switch (num) {
					case 0:
						this.$router.push('/hysy')
						break;
					case 1:
						this.$router.push('/tqhy')
						break;
					case 2:
						this.$router.push('/hyjb')
						break;
					case 3:
						this.$router.push('/sphf')
						break;
					default:
						break;
				}

			}
		},
		}
</script>

<style>
	.sphfMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.tqhyPageHead{
		width: 1140px;
		min-width: 1140px;
		height: 60px;
		margin: auto;
		margin-top: 33px;
	}
	.tqhyPageHead ul{
		list-style: none;
		text-align: center;
		height: 60px;
		width: 1140px;
	}
	.tqhyHeadHover{
		background-color: #150e52 !important;
		color: #fff !important;
	}
	.tqhyPageHead ul li:nth-child(-n+3){
		width: 195px;
		height: 50px;
		margin: auto;
		line-height: 50px;
		float: left;
		margin-right:114px;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
		border-radius: 30px;
		border: 2px solid #150e52;
	} 
	.tqhyPageHead ul li:nth-child(4){
		width: 195px;
		height: 50px;
		line-height: 50px;
		float: left;
		margin: auto;
		border-radius: 30px;
		border: 2px solid #150e52;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
	}
	.sphfContent{
		width: 1140px;
		min-width: 1140px;
		max-height: 1000px;
		margin: auto;
		margin-top: 33px;
		overflow: hidden;
		min-height: 500px;
	}
	.sphfModule:nth-child(odd){
		width: 510px;
		height: auto;
		display: inline-block;
		padding: 22px 22px;
		float: left;
		margin-right: 32px;
		margin-bottom: 28px;
	}
	.sphfModule:nth-child(even){
		width: 510px;
		height: auto;
		display: inline-block;
		margin-bottom: 28px;
		padding: 22px 22px;
		float: left;
	}
	.sphfHover{
		background-color: #fff;
	}
	.el-pagination{
		  display: inline-block;
		  float: left;
	  }
	  .el-pager li,.el-pager li.active+li {
		border: 2px solid #8c8c8c !important;
		margin-right: 12px !important;
		color: #8c8c8c;
		border-radius: 7px;
		height: 35px !important;
		font-size: 18px !important;
		line-height: 33px !important;
		width: 26px;
		font-family: Arial, Helvetica, sans-serif;
		
	  }
	   .el-pager li:hover{
		   color: #8c8c8c !important;
	   }
	  .el-pager li{
		  background-color: #f7f7f7 !important;
	  }
	  .btn-next{
		  padding-left: 2px !important;
		  background-color: #f7f7f7 !important;
	  }
		   
	   .btn-prev{
		    background-color: #f7f7f7 !important;
	   }
	  .btn-prev .el-icon-arrow-left:before,.btn-next .el-icon-arrow-right:before {
	      border: 2px solid #8c8c8c;
	      height: 31px;
	      display: flex;
	      width: 26px;
	      border-radius: 7px;
	      text-align: center;
	      margin: auto;
	      line-height: 32px;
	      font-size: 24px;
	      padding-left: 5px;
	      font-weight: 700;
		  color: #8c8c8c;
	  }
	  .el-icon-arrow-right:before {
	      content: "\E6E0";
	      margin-left: -12px;
	  }
	 
	  .button1{
	  		  width: 67px;
	  		  height: 36px;
	  		  font-size: 16px;
	  		  border-radius: 7px;
	  		  color: #ffffff;
	  		  background-color: #150e52;
	  		  font-weight: 700;
	  		  margin-left:12px;
	  		  float: left;
	  		  margin-top: 2px;
			  border: 0px;
	  }
	  .el-pager li.active {
	      color: white !important;
	      cursor: default;
	      background-color: #150e52 !important;
	      border: 1px !important;
	      /* text-align: center; */
	      line-height: 36px !important;
		  
	  }
	  .el-pagination__jump {
	      margin-left: 3px !important;
	      font-weight: 600 !important;
	      color: #8c8c8c !important;
	      font-size: 17px;
		  float: left;
		  margin-top: 1px;
	  }
	  .inputNum{
		  width: 33px !important;
		  height: 33px !important;
		  border: 2px solid #8c8c8c !important;
		  border-radius: 7px;
		  border: 0;
		  outline: none; 
		  text-align: center;
		  background-color: #f7f7f7;
	  }
	.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{
		border:0px !important;
		color: #8c8c8c !important;
	}
</style>